<template>
    <view class="page">
        <back :isBack="true" :isBg="false" :title="'我的站点'"></back>

        <scroll-view class="address_box" scroll-y @scrolltolower="lower()">
            <view class="dange_adress_box" v-for="(item, index) in directoryList" :key="index" @click="dzcsBtn(item)">
                <view class="dizhi_text">
                    <view class="dibiao_box">

                    </view>
                    <view class="dz_text">{{ item.name }}</view>
                </view>
                <view class="deta_adress_box">{{ item.address }}</view>
                <view class="call_num_box">
                    {{ item.phone }}
                </view>

                <view class="cz_box" v-if="!shiwo">
                    <view class="dange_cz_box" v-for="(items, indexs) in handleList" :key="indexs"
                        @click.stop="handle(item, items)">
                        {{ items.text }}
                    </view>
                </view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            directoryList: [],
            handleList: [
                {
                    id: 1,
                    text: '编辑'
                },
                {
                    id: 2,
                    text: '删除'
                }
            ],
            page: 1,   // 第一页
            flag: true,  // 防抖开关 防止用户不停的下拉
            noClick: true,//防连点
        }
    },
    onShow() {
        this.page = 1
        this.directoryList = []
        this.getadress()
    },
    methods: {

        lower() {
            if (this.flag) {
                this.getadress();
            } else {
                this.loadStatus = 'normal'
            }

        },
        getadress() {
            this.loadStatus = 'loading'
            let data = {
                page: this.page
            }
            this.$Request.post(this.$api.user.stationInfo, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var directoryList = res.data;
                    this.page++;
                    this.directoryList = this.directoryList.concat(directoryList);
                    if (directoryList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        },
        handle(item, items) {
            if (items.id == 1) {
                this.$store.state.insterPep = {
                    location: item.address,
                    lng: item.lng,
                    lat: item.lat,
                    bigHouse: ''
                }
                uni.navigateTo({
                    url: '/userPage/already/stationrequest?name=' + item.name + '&img_url=' + item.img_url + '&partner_id=' + item.partner_id + '&time_period=' + item.time_period + '&phone=' + item.phone + '&redact=' + true + '&id=' + item.id
                })
            } else {
                let data = {
                    id: item.id
                }
                this.$Request.post(this.$api.user.stationDelete, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                        this.page = 1
                        this.directoryList = []
                        this.getadress()
                    }
                })

            }

        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0));

    .address_box {
        width: 100%;
        height: calc(100vh - 420rpx);
        margin-top: 20rpx;

        .dange_adress_box {
            width: 704rpx;
            height: 212rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-bottom: 20rpx;
            padding: 38rpx 22rpx;
            box-sizing: border-box;
            position: relative;

            .dizhi_text {
                width: 100%;
                height: 50rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .dibiao_box {
                    width: 25rpx;
                    height: 30rpx;
                    background-image: url('https://rubbish.lwjcg.com/static/index/lvdz.png');
                    background-size: 100% 100%;
                    margin-right: 13.5rpx;
                }

                .dz_text {
                    width: 500rpx;
                    height: 50rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    line-height: 50rpx;
                    color: rgba(0, 0, 0, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }
            }

            .deta_adress_box {
                width: 100%;
                height: 34rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 34rpx;
                color: rgba(166, 166, 166, 1);
                box-sizing: border-box;
                padding-left: 38rpx;

            }

            .call_num_box {
                width: 260rpx;
                height: 72rpx;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 72rpx;
                color: rgba(128, 128, 128, 1);
                box-sizing: border-box;
                padding-left: 38rpx;

            }

            .cz_box {
                width: 262rpx;
                height: 46rpx;
                display: flex;
                justify-content: space-between;
                position: absolute;
                right: 30rpx;
                bottom: 20rpx;

                .dange_cz_box {
                    width: 114rpx;
                    height: 46rpx;
                    border-radius: 8rpx;
                    border: 2rpx solid rgba(229, 229, 229, 1);
                    text-align: center;
                    line-height: 46rpx;
                }

            }
        }
    }
}
</style>